<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网易邮箱登录</title>
		<link href="homework8.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<header>
			<!--左边logo-->
			<h1><a href="#"><img src="163logo.gif" alt="logo"/></a></h1>
			<!--右边超链接-->
			<p>
				<a href="#">免费邮</a>
				<a href="#"> 企业邮</a>
				<a href="#">VIP邮箱</a>
				<a href="#">帮助</a>
			</p>
		</header>
		<!--中间的section部分又分为左右结构，左边是图片和无序列表，右边是表单-->
		<section>
			<!--左边-->
			<div>
				<img src="imap.jpg" alt="" />
				<ul>
					<li>163/126/yeah三大免费邮箱均默认开放</li>
					<li>全面支持iPhone/iPad及Android等系统</li>
					<li>客户端、手机与网页，实现发送、阅读邮件</li>
				</ul>
				<a href="#">立即同步普通登录手机号登录</a>
			</div>
			<!--右边-->
			<form action="#" method="get">
				<p>
					用户名：
					<input type="text" name="userName" /> @163.com
				</p>
				<p>
					密码：
					<input type="password" name="psw" />
				</p>
				<p>
					版本：
					<select name="" version id="">
						<option value="">默认</option>
						<option value="2018">2018</option>
						<option value="2017">2017</option>
						<option value="2016">2016</option>
						<option value="2015">2015</option>
					</select>
				</p>
				<p>
					<input type="checkbox" value="autoLogin" />自动登录
					<input type="checkbox" value="ssl" checked/>SSL
				</p>
			</form>
		</section>
		<!--底部-->
		<footer>
			<img src="netease_logo.gif" alt="" />
			<a href="#">关于网易</a>
			<a href="#">免费邮 </a>
			<a href="#">官方博客</a>
			<a href="#">客户服务 </a>
			<a href="#">隐私政策</a>|
			<a href="#">网易公司版权所有 &copy; 2015-2018</a>
		</footer>
	</body>

</html>
